<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>试卷成绩</title>
  <link rel="stylesheet" href="./css/look.css">
</head>

<body>
  <div class="top-nav">
    <div><a href="./personalCenter.html">退出</a></div>
    试卷成绩
  </div>

  <div class="bodyImg">
    <img src="./images/result_img.png" alt="">
  </div>

  <div class="center">
    <h2 class="prompt">交卷成功</h2>
    <h2 class="grade">
      本次成绩
      <b>90.0</b>分
    </h2>

    <div class="gray">
      <p>开考时间：2024-6-17 11：20</p>
      <p>提交时间：2024-6-17 11：45</p>
      <p>考试用时：25分钟</p>
    </div>
    <p class="p5">
      <span>等级：</span>
      <a href="./exam_paper.html">查看试卷</a>
    </p>
  </div>

  <script>
    // 1. 页面显示成绩
    const score = JSON.parse(localStorage.getItem('score'))
    document.querySelector('.grade b').innerHTML = `${score}.0`

    // 2. 显示等级
    const questionList = JSON.parse(localStorage.getItem('questionList')) || []
    const grade_A = questionList.length * 2 * 0.8
    const grade_B = questionList.length * 2 * 0.6
    const grade_C = questionList.length * 2 * 0.4

    const span = document.querySelector('.p5 span')
    if (score >= grade_A) {
      span.innerHTML += 'A'
    } else if (score >= grade_B) {
      span.innerHTML += 'B'
    } else if (score >= grade_C) {
      span.innerHTML += 'C'
    } else {
      span.innerHTML += 'D'
    }
  </script>
</body>

</html>